<template>
  <div class="supplier-check setting-content">
    <h2 class="setting-header">
      <strong>
        <span>报名记录</span>
      </strong>
    </h2>
    <div class="top-info">
      <SearchCmp
        style="margin: 10px 0"
        v-if="searchCmpArray.length"
        :searchCmpArray="searchCmpArray"
        :searchForm="queryData"
        @onSubmit="handleSearch"
      />
      <el-button type="primary" @click="toFront">前台访问</el-button>
    </div>
    <RuifoxTable
      v-loading="tableLoading"
      v-model:tableData="tableData"
      :field-list="fieldList"
      :lazy="true"
      :default-checkbox="false"
    >
      <template #default-checkbox="{ element }">
        <div class="table-div-check">
          <el-checkbox
            class="unmover"
            v-model="element.checked"
            @change="handleCheckTable(element.id)"
            size=""
          />
        </div>
      </template>

      <!-- 项目状态 -->
      <template #projectState="{ element }" >
        <el-tag v-if="element.projectState == 1" type="success">未开始</el-tag>
        <el-tag v-if="element.projectState == 2" type="primary">报名中</el-tag>
        <el-tag v-if="element.projectState == 3" type="danger">已结束</el-tag>
      </template>

      <!-- 报名状态 -->
      <template #applicationState="{ element }" >
        <el-tag v-if="element.applicationState == 1" type="info">未报名</el-tag>
        <el-tag v-if="element.applicationState == 2" type="primary">待审核</el-tag>
        <el-tag v-if="element.applicationState == 3" type="danger">审核失败</el-tag>
        <el-tag v-if="element.applicationState == 4" type="success">审核通过</el-tag>
        <el-tag v-if="element.applicationState == 5" type="success">已中标</el-tag>
        <el-tag v-if="element.applicationState == 6" type="danger">未中标</el-tag>
        <el-tag v-if="element.applicationState == 7" type="danger">已取消</el-tag>
      </template>

      <template #options="{ element }">
        <div class="table-td-option unmover">
          <el-button type="primary" link @click="getDetail(element)">
            报名详情
          </el-button>
          <el-button type="danger" link @click="cancelSignUp(element)" v-if="element.applicationState == 2">
            取消报名
          </el-button>
        </div>
      </template>
    </RuifoxTable>
    <!-- 分页器 -->
    <PaginationView
      :total="queryData.total"
      :pageSize="queryData.pageSize"
      :currentPage="queryData.currentPage"
      :allChoose="isAllChooseBtn"
      :pageChoose="isPageChooseBtn"
      :options="batchOptions"
      :checkedNum="checkedNum"
      :canChoose="false"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @changePageChoose="handlePageChoose"
      @changeAllChoose="handleAllChoose"
      @invertChoose="handleInvertChoose"
      @checkOption="handleBatchOptions"
      @refreshList="getBid"
      @cancelChoose="handleResetPagination"
    />
    <el-dialog v-model="detailVisible" title="报名详情" width="800px" modal style="margin-top: 50px;max-width:90%">
      <!-- <FormEcho v-if="preViewFormInfo" :formData="preViewFormInfo" ref="childRef" height="60vh" :disabled="true" :showDevice="false" :simple="true"/> -->
      <div class="publish-info">
        <div>
          <span class="label">提交时间：</span>
          <span>{{ preViewFormInfo.applyTime }}</span>
        </div>
      </div>
      <FormEcho :formData="preViewFormInfo" :modelValue="answerForm" height="60vh" :disabled="true" :showDevice="false" :simple="true" />
      <template #footer>
        <span class="dialog-footer">
          <!-- <el-button @click="addInstanceVisible = false">取消</el-button> -->
          <el-button  @click="detailVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { tableList as mixTable } from "@ruifox-cms/utils";
import { 
  selectPageParticipateApplication,
  cancelApplicationParticipateApplication
 } from "@/api/supplier";
import { selectPaperResult } from "@/api/form";
import { FormEcho } from "@ruifox-cms/components";
import { ElMessageBox } from "element-plus";
import { useRouter } from 'vue-router'

const searchCmpArray = ref([{ label: "名称", key: "keyWords" }]);
const router = useRouter()

//分页器
const {
  queryData,
  tableData: oriTableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  // checkedList,
  // isAllSearch,
  // getTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: selectPageParticipateApplication,
  // batchFuncApi: deleteByIdsCourse,
});

const toFront = () => {
  router.push({ path: '/bidding/user/noticeList' });
}
//搜索条件
const defaultQuery = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
  projectState: "",
  applicationState: "",
  keyWords: "",
});
Object.assign(queryData, defaultQuery);
const tableData = ref([]);

//获取数据
const getBid = async () => {
  let res = await selectPageParticipateApplication(queryData);
 
  if (res.code == 20000) {
    oriTableData.value = res.data.list;
    tableData.value = res.data.list;
    queryData.total = res.data.total;
  }
};

//答卷详情
const detailVisible = ref(false);
const preViewFormInfo = ref([])
const answerForm = ref({})

const getDetail = async (row) => {
  console.log("详情",row);
  let res = await selectPaperResult({id: row.formResultId, formId: row.needFormId});
  if (res.code == 20000) {
    detailVisible.value = true;
    preViewFormInfo.value = res.data;
    preViewFormInfo.value.applyTime = row.applyTime
    res.data.formItemList.forEach(item => {
    answerForm.value[item.formItemId] = item.modelValue
  })
  }
};
onMounted(async() => {
  await getBid()
});

//取消报名
const cancelSignUp = async (row) => {
  ElMessageBox.confirm("是否取消报名？", "取消确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let res = await cancelApplicationParticipateApplication({id: row.participateApplicationId});
    if (res.code == 20000) {
      getBid();
    }
  });
};

//表格展示字段
const fieldList = ref([
  {
    title: "项目名称",
    name: "projectName",
  },
  {
    title: "报名时间",
    name: "applyTime",
  },
  {
    title: "项目状态",
    name: "projectState",
  },
  {
    title: "报名人",
    name: "userName",
  },
  {
    title: "报名状态",
    name: "applicationState",
  },
  {
    title: "操作",
    name: "options",
    width: 200,
  },
]);
</script>
<style scoped lang="scss">
.setting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
